// 头部组件
window.VueComponents.Header = {
  data: () => ({
    nav: [],
    navActive: -1,
    keyWord: "", //搜索文字
  }),
  template: `   <header class="header">
  <div class="box">
    <!-- 网站logo -->
    <h1>电影网站</h1>
    <!-- 导航头部 -->
    <nav>
      <!-- 点击选中对应导航 -->
      <a
        v-for="item in nav"
        :key="item.id"
        :class="{active : item.id == navActive}"
        v-on:click="handlerNav(item)"
        :href="item.href == -1 ? 'index.html' : (item.href + '?type=' + item.id)"
      >
        {{item.title}}
      </a>
    </nav>
    <!-- 网站搜索 -->
    <form id="searchForm" @submit="handSearch">
      <div class="searchView">
        <input
          style="padding-right: 30px"
          type="text"
          class="form-control form-control-sm"
          id="searchInput"
          v-model="keyWord"
          placeholder="输入关键字搜索"
        />
        <img src="./icon/search.svg" class="searchImg rounded" />
      </div>
    </form>
  </div>
</header>`,

  method: {},
  created() {
    // 添加组件的样式
    addCssByLink("./component/Header.css");
    //  数据初始化
    this.navInit();
  },
  methods: {
    // 方法
    navInit() {
      // 导航数据
      const data = NavData();
      this.nav = data;
      const query = this.getQueryVariable();
      if (query.type) {
        this.navActive = Number(query.type);
      }
    },
    // 点击搜索
    handSearch(e) {
      e.preventDefault();
      window.location.href = "search.html?search=" + this.keyWord;
    },

    // 获取参数
    getQueryVariable() {
      let query = window.location.search.substring(1);
      let vars = query.split("&");
      let queryValue = {};
      vars.forEach((pair) => {
        if (pair.indexOf("=") != -1) {
          const item = pair.split("=");
          queryValue[item[0]] = item[1];
        }
      });
      return queryValue;
    },
  },
};
